<template>
	<view class="page_box">
		<u-navbar :is-back="true" title="我的钱包" v-if="1" :border-bottom="false" id="navbarr"></u-navbar>

		<view class="content_box">
			<view class="content-item content-border">
				<view class="bg-img my-purse flex flex-direction justify-between">
					<view class="money-cont">
						<view class="f24 text-white">钱包余额（元）</view>
						<view class="f56 text-white" style="margin-top: 10rpx;">2000</view>
					</view>
					<view class="wallet-bot flex align-center">
						<view class="flex align-center">
							<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_sj.png" style="width: 25rpx;height: 25rpx;"></image>
							<text class="f26 text-white" style="margin-left: 12rpx;">实缴：2000</text>
						</view>
						<view class="flex align-center" style="margin-left: 56rpx;">
							<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_rj.png" style="width: 31rpx;height: 31rpx;"></image>
							<text class="f26 text-white" style="margin-left: 12rpx;">认缴(积分)：303.3</text>
						</view>
					</view>
					<view class="publishCse flex align-center" @click="withdrawal_record">
						<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_withdraw.png" style="width: 36rpx;height: 32rpx;"></image>
						<text class="f26 margin-left-sm text-white">提现</text>
					</view>
				</view>
				<view class="prise-bot flex justify-between">
					<text>推广佣金：￥2360</text>
					<text>代理佣金：￥2360</text>
				</view>
			</view>
			<view class="content-item">
				<view class="purse-title flex justify-between">
					<view class="title-item" @click="purseTitle(0)">
						<view :class="title_index==0?'title title-after':'title'">
							推广明细<text class="f26" style="color: #717171;font-weight: 500;">（共23人）</text>
						</view>
					</view>
					<view class="title-item" @click="purseTitle(1)">
						<view :class="title_index==1?'title title-after':'title'">代理明细</view>
					</view>
				</view>
				<swiper :current="swiperCurrent" @change="swiperchange" class="detailed-list" :style="{'height':windowHeight+'px'}">
					<swiper-item class="swiper-item">
						<scroll-view class="list-content" scroll-y :style="{'height':windowHeight+'px'}">
							<view class="item flex justify-between align-center" v-for="(item, index) in detailed_list" :key="index">
								<view class="flex align-center">
									<u-avatar mode="circle" size="88" :src="item.header"></u-avatar>
									<view class="margin-left-sm">
										<view class="f28">
											<text class="margin-right-sm">{{item.name}}</text>
											<u-tag text="BF6322" mode="dark" color="#FFB81E" bg-color="#ffb81e45" size="mini" />
										</view>
										<view class="f26 margin-top-xs" style="color: #ABABAB;font-family: PingFang SC,PingFang SC-Medium;font-weight: 200;">{{item.time}}</view>
									</view>
								</view>
								<view>{{item.content}}</view>
							</view>
						</scroll-view>
					</swiper-item>
					<swiper-item class="swiper-item">
						<scroll-view class="list-content" scroll-y :style="{'height':windowHeight+'px'}">
							<view class="item flex justify-between align-center" v-for="(item, index) in detailed_list" :key="index">
								<view class="flex align-center">
									<u-avatar mode="circle" size="88" :src="item.header"></u-avatar>
									<view class="margin-left-sm">
										<view class="f28">
											<text class="margin-right-sm">{{item.name}}</text>
											<u-tag text="BF6322" mode="dark" color="#FFB81E" bg-color="#ffb81e45" size="mini" />
										</view>
										<view class="f26 margin-top-xs" style="color: #ABABAB;font-family: PingFang SC,PingFang SC-Medium;font-weight: 200;">{{item.time}}</view>
									</view>
								</view>
								<view>{{item.content}}</view>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>	
		</view>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			title_index:0,
			swiperCurrent:0,
			windowHeight:0,
			detailed_list:[{
				header:"https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/bj.png",
				name:"艾福西西",
				time:"2021.03.29 16:48",
				code:"BF6322",
				content:"+160"
			},{
				header:"https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/bj.png",
				name:"艾福西西",
				time:"2021.03.29 16:48",
				code:"BF6322",
				content:"+160"
			},{
				header:"https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/bj.png",
				name:"艾福西西",
				time:"2021.03.29 16:48",
				code:"BF6322",
				content:"+160"
			},],			
		};
	},
	onShow() {},
	onLoad(e) {
		var _this = this;
		uni.getSystemInfo({
		    success: function (res) {
				_this.windowHeight = res.windowHeight
		    }
		});
	},
	mounted() {},
	methods: {
		purseTitle(index){
			this.swiperCurrent = index
		},
		swiperchange(index){
			this.title_index = index.detail.current;
		},
		withdrawal_record(){
			uni.navigateTo({
				url:'./withdrawal'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.content_box {	
	.my-purse{
		padding: 50rpx 30rpx;
		width: 100%;
		height: 260rpx;
		position: relative;
		background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210617180910.png);
		.publishCse{
			position: absolute;
			right: 0;
			top: 40%;
			background: #BEA06E;
			border-radius: 30rpx 0px 0px 30rpx;
			height: 60rpx;
			padding: 10rpx 38rpx 10rpx 14rpx ;
		}	
	}
	.prise-bot{
		margin: 0 30rpx 30rpx;
		background: #ffefcf;
		border-radius: 0px 0px 20rpx 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		text{
			color: #A9731A;
			font-size: 26rpx;
			display: block;
			width: 50%;
			text-align: center;
		}
		
	}
	.purse-title{
		margin-top: 20rpx;
		padding: 0 15%;
		.title-item{
			display: flex;
			justify-content: center;			
			.title{
				font-size: 32rpx;
				font-weight: 700;
				color: #717171;
			}
			.title-after{
				position: relative;
				color: #232323;		
				z-index: 1;
				&::before{
					content: '';
					width: 140rpx;
					height: 8rpx;
					background: #ffcc00;
					border-radius: 6rpx;
					position: absolute;
					left: -4rpx;
					bottom: 4rpx;
					z-index: -1;
				}
			}
		}		
	}
	.detailed-list{
		padding: 30rpx 0;
		.swiper-item{
			.list-content{
				.item{
					padding: 24rpx 0;
					border-bottom: 1rpx solid #F8F8F8;
				}
			}
		}
	}
}
</style>
